<!DOCTYPE html>
<html lang="zh-cmn-Hans">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
    <meta name="wechat-enable-text-zoom-em" content="true">
    <title>订单详情</title>
    <link rel="stylesheet" href="css/weui.min.css">
    <link rel="stylesheet" href="css/example.css">
    <style>
        .weui-form{
            background: #cecece;
        }
        .weui-cells{
            background: #fff;
            color: #000;
        }
        .weui-cells div{
            color: #000;
            font-size: 12px;
            margin-left: 0px !important;
margin-right: 0px !important;

        }
        .weui-cell_select .weui-cell__bd::after{
            color: hsla(0, 0%, 0%, 0.52) !important;
        }
        .weui-cell.weui-cell_active.weui-cell_select{
            height: 44px;
        }
        .weui-form__control-area{
            margin-top: 0px;
        }
        .weui-form{
            padding-top: 0px;
        }
    </style>

    <style>
    .pro_type_grid .pro_item{
        width: calc(50% - .21rem * 2);
    }
    .header-search-txt{
        padding-left: 24px;
padding-right: 10px;
        width: 100%;
        background: #dddcdc;
       /* margin-left: 10px;
        margin-right: 10px;*/
        height: 25px;
        border-radius: 50px;
    }
    .page-header-background.header-title{
        text-align: center;
        color: #fff;
        font-size: 14px;
        font-weight: bold;
        line-height: 44px;
    }
    .pro_item .cover .photo{
        height:30px !important
    }
    .pro_item .cover{
        text-align: center;
    }
    .pro_item .item_inner{
        display: grid;
        grid-template-rows: auto auto;
        margin-bottom: 5px;
        background: #fff;
        padding-top: 15px;
        padding-bottom: 15px;
        height: 55px;
    }
    .pro_item div{
        text-align: center;
        font-size: 13px;
    }
    body{
        background: #eee;
        height: 100%;
    }
    .pro_item{
        display: grid;
grid-template-columns: auto auto;
grid-column-gap: 5px;
    }
    .page-header-background.header-title{
        background: #40af41;
    }
    .p1{
        padding-left: 10px;
padding-right: 10px;
padding-bottom: 10px;
background: #fff;
padding-top: 6px;
margin-top: -6px;
    }
    .p2{
        margin-left: 10px;
margin-right: 10px;
font-size: 10px;
text-align: center;
margin-bottom: 10px;

    }
    .c1{
        color: #888;
    }
    .d3{
        margin-bottom: 10px;
margin-top: 10px;
    }
    .d4{
        text-align: center;
        margin-bottom: 30px;
        position: fixed;
bottom: 10px;
width: 100%;
    }
    .but-lx{
    border: none;
width: 70%;
background: #f08818;
color: #fff;
line-height: 30px;
  border-radius: 50px;
}
.swiper-pagination-bullet.swiper-pagination-bullet-active{
    background: #40af41 !important;
}
.swiper-pagination-bullet{
    width: 5px !important;
height: 5px !important;
border-radius: 50px !important;
background: #888 !important;
}
.fb.fb-user{
    background-image: url(../images/user2.png) !important;
    background-position: 0 0 !important;
}
.fb.fb-home{
    background-image: url(../images/home2.png) !important;
    background-position: 0 0 !important;
}
.nav-controller{
    color:#888 !important
}
.nav-controller.active{
    color:#40af41 !important
}
.weui-cell-bor {
    border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;
}
.b-d1{
    padding-left: 10px;
    padding-right: 10px;
    grid-column-gap: 10px;
    display: grid;
grid-template-columns: 5px auto;
}
.b-d1-1{
    background: #40af41;
}
.b-r-1{
    display: grid;
grid-template-rows: 14px auto 14px;
height: 44px;
    line-height: 16px;
}
.page.home .weui-cell {
  padding-left: 10px !important;
  padding-right: 10px !important;
}
.weui-select {
    padding-left: 0px !important;
    
/*    padding-right: 0px !important;*/
}
.weui-select.p{
    text-align: right;
}
.weui-cell__hd,.weui-cell__hd{
padding-left: 0px !important;
}
.weui-input::placeholder{
color:#000 !important;
text-align: right;
}
.b-r-20{
    padding-right: 30px;
}
.weui-input {
    text-align: right;
}
.weui-cell__bd .weui-select{
    text-align: right;
}
.weui-cell-bor{
    background: #fff;
}

.hei1{
    height: 10px;
    background: #cecece;
    width: 100%;
}
.hei2{
    height: 44px;
    line-height: 44px;
    width: 100%;
    text-align: center;
}
.hei2-1{
    height: 44px;
    line-height: 44px;
    width: 100%;
}
body{
    background: #cecece;
    font-size: 12px;
}
.lr10{
    padding-left: 10px;
padding-right: 10px;
display: grid;
grid-template-columns: auto 45px;
height: 44px;
background: #fff;
}
.a{
display: grid;
grid-template-rows: auto 20px auto;
}
.b{
    text-align: center;
    border-left-width: 1px;
border-left-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-radius: 50px;
border-color: #ff3000bd;
color: #ff3000bd;
font-size: 10px;
}
.lr20{
    display: grid;
grid-template-columns: 20px auto 20px;
height: 44px;   padding-left: 10px;
padding-right: 10px;
grid-column-gap: 6px;background: #fff;
}
.gj{
    display: grid;
grid-template-columns: auto auto auto auto;
grid-column-gap: 5px;
text-align: center;
}
.gj .active{
    background: #f7ae00ed;
color: #fff;
font-size: 10px;
line-height: 30px;
border-radius: 3px;
}
.gj{
    font-size: 10px;
line-height: 30px;
border-radius: 3px;
}

.gjk{
    border-left-width: 1px;
border-left-style: solid;
border-top-width: 1px;
border-top-style: solid;
border-right-width: 1px;
border-right-style: solid;
border-bottom-width: 1px;
border-bottom-style: solid;
border-color: #cecece;border-radius: 3px;
}
.gd-3{
    display: grid;
    grid-template-columns: auto 20px auto;
    text-align: center;
    background: #fff;
    padding-top: 10px;
padding-bottom: 10px;
}
.gd-3 h2{
    font-weight: bold;

}
.page-header-background.header-title{
    position: fixed !important;
top: 0px !important;
width: 100% !important;
z-index: 999 !important;
}
#vue-main{
    margin-top: 44px;
}
</style>



    <script src="js/vue.min.js"></script>
    <script src="js/vue-resource.min.js"></script>
    <script  src="js/_config.json"></script>

</head>
<body ontouchstart>



<div id="vue-main">



        
        <div class="page-header-background header-title">
            <a href="javascript:;" onclick="window.location.href=history.back(-1)"><div style="position: absolute;padding-top: 5px;padding-left: 5px;"><img style="height: 20px;" src="images/return.png"></div></a>
            <div>订单详情</div>
        </div>

 



    <div class="lr10">
        <div class="a">
            <div></div>
            <div style="overflow: hidden;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 1;">No.{{list.order_on}}【{{list.chwpingzhong}}】</div>
            <div></div>
        </div>
        <div class="a">
            <div></div>
            <div class="b">新订单</div>
            <div></div>
        </div>
    </div>

    <div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>

    <div class="gd-3">
        <div>
            <h2 >{{t_s}}</h2>
            <div>{{t_c}} {{t_q}}</div>
        </div>
        <div style="margin-top: 14px;"><img style="height:20px;width:20px" src="images/jt.png"></div>
        <div>
            <h2 >{{d_s}}</h2>
            <div>{{d_c}} {{d_q}}</div>
        </div>
    </div>



    <div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
    <div class="lr20">
        <div class="a">
            <div></div>
            <div><img style="height:20px" src="images/tag.png"></div>
            <div></div>
        </div>
        <div class="a">
            <div></div>
            <div >健康检查</div>
            <div></div>
        </div>
        <div class="a" style="text-align: center;">
            <div></div>
            <div style="border-radius: 50px;
    background: #b5b5b5;
    font-size: 10px;
    line-height: 20px;color: #fff;">否</div>
            <div></div>
        </div>
    </div>
    <div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
    <div class="lr20">
        <div class="a">
            <div></div>
            <div><img style="height:20px" src="images/tag.png"></div>
            <div></div>
        </div>
        <div class="a">
            <div></div>
            <div >上门接宠</div>
            <div></div>
        </div>
        <div v-if="list.chwshangmjc==1" class="a" style="text-align: center;">
            <div></div>
            <div style="border-radius: 50px;
    background: #40af41;
    font-size: 10px;
    line-height: 20px;color: #fff;">是</div>
            <div></div>
        </div>
        <div v-else class="a" style="text-align: center;">
            <div></div>
            <div style="border-radius: 50px;
    background: #b5b5b5;
    font-size: 10px;
    line-height: 20px;color: #fff;">否</div>
            <div></div>
        </div>
    </div>
    <div style="height: 1px ; background: #cecece;width: 100%;">&nbsp;</div>
    <div class="lr20">
        <div class="a">
            <div></div>
            <div><img style="height:20px" src="images/tag.png"></div>
            <div></div>
        </div>
        <div class="a">
            <div></div>
            <div >上门送宠</div>
            <div></div>
        </div>
        <div v-if="list.chwshangmsc==1" class="a" style="text-align: center;">
            <div></div>
            <div style="border-radius: 50px;
    background: #40af41;
    font-size: 10px;
    line-height: 20px;color: #fff;">是</div>
            <div></div>
        </div>
        <div v-else class="a" style="text-align: center;">
            <div></div>
            <div style="border-radius: 50px;
    background: #b5b5b5;
    font-size: 10px;
    line-height: 20px;color: #fff;">否</div>
            <div></div>
        </div>
    </div>
    <div style="height: 10px ; background: #cecece;width: 100%;">&nbsp;</div>
    <div class="b-r-1 weui-cell-bor">
        <div></div>
        <div class="b-d1">
            <div class="b-d1-1"></div>
            <div>运费支付</div>
        </div>
        <div></div>
    </div>

    <div class="lr20" style="grid-template-columns: 20px auto 40px;">
        <div class="a">
            <div></div>
            <div><img style="height:20px" src="images/tag_fill.png"></div>
            <div></div>
        </div>
        <div class="a">
            <div></div>
            <div style="color: #888;">系统报价<span> ¥ {{list.money?list.money:"0.00"}}元</span></div>
            <div></div>
        </div>
        <div class="a" style="text-align: center;">
            <div></div>
            <a href="javascript:;" role="button" @click="load2()" id="showLoadingToast1"><div style="border-radius: 50px;background: #b5b5b5;font-size: 10px;line-height: 20px;color: #fff;background: #40af41;">支付</div></a>
            <div></div>
        </div>
    </div>


    <div role="alert" id="loadingToast1" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast">
              <span class="weui-primary-loading weui-icon_toast">
                <span class="weui-primary-loading__dot"></span>
              </span>
              <p class="weui-toast__content">正在加载</p>
          </div>
        </div>
    </div>

    <div style="height: 10px ; background: #cecece;width: 100%;">&nbsp;</div>
    <div class="b-r-1 weui-cell-bor">
        <div></div>
        <div class="b-d1" style="grid-template-columns: 5px auto auto;">
            <div class="b-d1-1" style="background: #f97806;"></div>
            <div>中国平安宠物运输险</div>
            <div style="text-align: right;color: #f97806;font-weight: bold;">请选择宠物价值</div>
        </div>
        <div></div>
    </div>


    <div class="weui-cell-bor" style="grid-template-rows: auto auto ;display: grid;">
        <div style="margin-left: 10%;margin-right: 10%;margin-top: 10px;
    margin-bottom: 10px;">
            <div class="gj">
                <div  :class="value==1||value==0?'active':'gjk'" @click="vcm(1)">{{list.bfmoney.b1}}元</div>
                <div :class="value==2?'active':'gjk'" @click="vcm(2)">{{list.bfmoney.b2}}元</div>
                <div :class="value==3?'active':'gjk'" @click="vcm(3)">{{list.bfmoney.b3}}元</div>
                <div :class="value==4?'active':'gjk'" @click="vcm(4)">{{list.bfmoney.b4}}元</div>
            </div>
        </div>
        <div>
            <a href="javascript:;" role="button" @click="load()" id="showLoadingToast" style="color:#fff" class="">
                <div class="" style="text-align: center;
                background: #f97806;
                line-height: 30px;
                font-size: 12px;
                margin-left: 10px;
                margin-right: 10px;
                border-radius: 50px;margin-bottom: 15px;">
                    支付保费: {{insurance}}元
                </div>
            </a>
        </div>
    </div>

<div role="alert" id="loadingToast" style="display: none;">
        <div class="weui-mask_transparent"></div>
        <div class="weui-toast__wrp">
          <div class="weui-toast">
              <span class="weui-primary-loading weui-icon_toast">
                <span class="weui-primary-loading__dot"></span>
              </span>
              <p class="weui-toast__content">正在加载</p>
          </div>
        </div>
    </div>

    <div style="font-size: 10px;margin-left: 10px;margin-right: 10px;margin-top: 10px;
    margin-bottom: 20px;">订单还没有跟踪信息</div>


    <div class="p2 c1">
       
        <div>客服工作时间：9:00~18:00，若有回复不及时，请耐心等待，客服会在上班后第一时间联系您！</div>
    </div>

    <div style="height: 10px ;width: 100%;">&nbsp;</div>
    <div class="p2 c1">
       
        <div>说明：因活体运输的特殊性，请在运输前支付运费，以免影响运输行程！</div>
    </div>
</div>





<script>
    var vm = new Vue({
        el: '#vue-main',
        data() {
            return {
                value: 0,
                insurance:8,
                t_s:"",
                t_c:"",
                t_q:"",
                d_s:"",
                d_c:"",
                d_q:"",
                id:0,
                list:[]
            }
        },
        created(){
           let url=window.location.search;
           let urlParams = new URLSearchParams(url);
           this.id = urlParams.get("id");
           // if(this.url==0){
           //     url=window.location.href;
           //    // window.location.href=url;
           // }
           if (this.id) {
                this.more(this.id);
           }else{
                this.city();
           }
            
        },
        mounted(){
            
        },
        methods: {
            vcm: function(v){
                this.value=v;
                if (v==1) {
                    this.insurance=this.list.bfmoney.b1/this.list.bfmoney.bl;
                }else if(v==2){
                    this.insurance=this.list.bfmoney.b2/this.list.bfmoney.bl;
                }else if(v==3){
                    this.insurance=this.list.bfmoney.b3/this.list.bfmoney.bl;
                }else if(v==4){
                    this.insurance=this.list.bfmoney.b4/this.list.bfmoney.bl;
                }
            },
            load:function(){
                var $loadingToast = $('#loadingToast');
                $('#showLoadingToast').on('click', function(){
                    if ($loadingToast.css('display') != 'none') return;

                    $loadingToast.fadeIn(100);
                    setTimeout(function () {
                        $loadingToast.fadeOut(100);
                        window.location.href="";
                    }, 500);
                });
            },
            load2:function(){
                var $loadingToast1 = $('#loadingToast1');
                $('#showLoadingToast1').on('click', function(){
                    if ($loadingToast1.css('display') != 'none') return;

                    $loadingToast1.fadeIn(100);
                    setTimeout(function () {
                        $loadingToast1.fadeOut(100);
                        window.location.href="";
                    }, 500);
                });
            },
            city:function(){
                this.t_s=localStorage.getItem("t_s");
                this.t_c=localStorage.getItem("t_c");
                this.t_q=localStorage.getItem("t_q");
                this.d_s=localStorage.getItem("d_s");
                this.d_c=localStorage.getItem("d_c");
                this.d_q=localStorage.getItem("d_q");
            },
            more:function(id){
                this.$http.post(siteConfig.BaseUrl+'/h5/api/?url=more',{
                    id:id
                },{emulateJSON: true}).then(function(res){
                    this.list=res.body.data;
                    this.t_s=res.body.data.t_s;
                    this.t_c=res.body.data.t_c;
                    this.t_q=res.body.data.t_q;
                    this.d_s=res.body.data.d_s;
                    this.d_c=res.body.data.d_c;
                    this.d_q=res.body.data.d_q;
                    this.insurance=this.list.bfmoney.b1/this.list.bfmoney.bl;
                },function(){
                    console.log("request fail");
                })
            }
        }
    })
    
</script>



    <!--     <script src="https://weui.io/zepto.min.js"></script>
        <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
        <script src="https://res.wx.qq.com/t/wx_fed/weui.js/res/1.2.17/weui.min.js"></script>
        <script src="https://weui.io/example.js"></script>
        <script src="https://weui.io/wah.js"></script>
        <script type="text/javascript"></script> -->


        <script src="js/zepto.min.js"></script>
        <script type="text/javascript" src="js/jweixin-1.0.0.js"></script>
        <script src="js/weui.min.js"></script>
        <script src="js/example.js"></script>
        <script src="js/wah.js"></script>
        <script type="text/javascript"></script>


        <script type="text/javascript">function wxReady(e){"object"==typeof WeixinJSBridge&&"function"==typeof window.WeixinJSBridge.invoke?e():document.addEventListener("WeixinJSBridgeReady",e,!1)}wxReady(function(){WeixinJSBridge.invoke("getUserConfig",{},function(e){e.isCareMode&&document.body.setAttribute("data-weui-mode","care")})})</script>
    </body>
</html>